import { StatusBar } from 'expo-status-bar';
import { Image, StyleSheet, Text, ToastAndroid, TouchableOpacity, View, TextInput, ImageBackground } from 'react-native';
import React, { useState } from "react";
import { Button } from 'antd';


export default function GetPassword({ navigation }) {
  const [username, setUsername] = useState("");
  const [birthday, setBirthday] = useState("");

  const onBtn = () => {
    fetch('http://10.7.89.174:3000/forget', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        userName: username,
        birthday: birthday,
      })
    })
      .then(res => res.json())
      .then(res => {
        if (res.code == 200) {
          alert(res.message[0].password)
        }
        else {
          ToastAndroid.show("找回失败", ToastAndroid.SHORT);
        }
      })
  };
  return (
    <View style={styles.container}>
      <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
        <Image source={require('../img/logo.jpg')} style={styles.logo}></Image>
        <TextInput
          placeholder="请输入用户名"
          onChangeText={text => setUsername(text)} //读取用户的输入,从TextInput里取值的唯一做法！）
          value={username}
          style={[styles.inputStyle]}
        />
        <TextInput
          placeholder="请输入生日"
          onChangeText={text => setBirthday(text)}
          value={birthday}
          style={[styles.inputStyle]}
        />

        <TouchableOpacity style={styles.btnStyle}>
          <Text style={styles.loginText} onPress={() => onBtn()}>找回密码</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.btnStyle}>
          <Text style={styles.loginText} onPress={() => { navigation.navigate("Login") }}>返回登录</Text>
        </TouchableOpacity>
        <StatusBar style="auto" />
      </ImageBackground>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    justifyContent: 'space-between',
    marginTop: 20,
    paddingTop: 40,
    flex: 1
  },
  bgimg: {
    flex: 1,
    resizeMode: "cover",
  },
  logo: {
    width: 200,
    height: 200,
    marginTop: "25%",
    marginBottom: "6%",
    marginLeft: "25%"
  },
  inputStyle: {
    width: '80%',
    height: 35,
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: 10,
    borderRadius: 8,
    borderColor: '#cacaca',
    borderWidth: 1,
    borderRadius: 8,
    paddingLeft: 15,
  },

  resigtertext: {
    marginRight: 'auto',
    marginLeft: 50,
    marginTop: 20,
    color: 'blue',
  },
  forgettext: {
    marginLeft: 'auto',
    marginRight: 40,
    marginTop: -20,
    color: 'blue',
  },
  btnStyle: {
    marginLeft: 'auto',
    marginRight: 'auto',
    height: 40,
    width: '80%',
    borderRadius: 5,
    marginTop: 20,
    backgroundColor: 'orange',
    justifyContent: 'center',
  },
  loginText: {
    textAlign: 'center',
    color: 'white',
    textAlignVertical: 'center',
    fontSize: 17
  },
})
